<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/25
  Time: 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>部门人事调动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<script>
    $(function () {
        //页面加载完成，发送异步请求，获取部门领导
        $.ajax({
            url:'/deptManage/getDeptManagerName.do',
            data:{
                dept_id:$("#dept_id").val()
            },
            success:function (result) {
                if(result != null && result != ''){
                    $("#manager_name").html(result);
                }
            }
        })
    });
</script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <h1 style="margin-bottom: 20px;">部门管理</h1>
    <!-- 部门id -->
    <input id="dept_id" value="${param.dept_id}" style="display: none">
    <!-- 表单区+返回按钮 -->
        <fieldset class="layui-elem-field" style="background-color: white">
            <legend><h3>部门信息详情</h3></legend>
            <div class="layui-field-box">
                <div style="margin: 10px;">
                    <span id="dept_name" style="font-size: 18px;">${param.dept_name}</span>
                    <button id="btn_deleteDept" onclick="deleteDept(${param.dept_id})" class="layui-btn layui-btn-xs layui-btn-danger">
                        删除
                    </button>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs9" style="padding-left: 10px;padding-top: 10px">
                        部门经理：<span id="manager_name">暂无</span>
                        <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="openDeptStaffPanel()">更换</button>
                    </div>
                    <!-- 搜索框 -->
                    <div class="layui-col-xs3">
                        <div style="width: 208px;height: 30px;border: 1px solid black;float: right;padding-left: 5px;">
                            <input id="queryCondition" placeholder="查找..." style="height: inherit;border: 0;"/>
                            <button type="button" class="layui-btn layui-btn-sm layui-bg-cyan" style="position: absolute;" onclick="queryDeptStaff()">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="tb_deptStaff" lay-filter="filter_deptStaff"></table>
            </div>
        </fieldset>
        <!-- 头像框 -->
        <script type="text/html" id="bar_img">
            <img src="/img/defualt_headpotrait.png" style="width: 33px;border: 1px solid #E6E6E6;border-radius: 100%">
        </script>
        <!-- 表格工具列 -->
        <script type="text/html" id="bar_deptStaff">
            <a class="layui-btn layui-btn-xs" lay-event="edit">
                <i class="layui-icon layui-icon-edit">人事调动</i>
            </a>
        </script>
        <!-- 返回按钮 -->
        <a href="/jsp/userManage/deptManage.jsp" class="layui-btn layui-btn-normal" style="margin: 10px;">返回</a>
</body>
<script>
    // 表格模块
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem:'#tb_deptStaff',
            url:'/deptManage/getDeptStaffList.do',
            where:{
                queryCondition:$("#queryCondition").val(),
                dept_id:$("#dept_id").val()
            },
            title: '用户数据表',
            cols: [[
                {field:'user_id', title:'ID',hide:true},
                {field:'img',hide:true},
                {toolbar: '#bar_img',width:64},
                {field:'real_name', title:'真实姓名'},
                {field:'user_name', title:'用户名'},
                {field:'position_name', title:'职位'},
                {title:'操作', toolbar: '#bar_deptStaff'}
            ]],
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip','refresh'], //自定义分页布局
                groups: 5, //只显示 1 个连续页码
                first: false, //不显示首页
                last: false //不显示尾页
            },
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                var data = res.data;//表格数据数组
                var trList = $("#tb_deptStaff").next().find(".layui-table-body").find("tr");
                //遍历表格数据，设置头像
                var len = data.length;
                for (i = 0; i < len; i++){

                    var $curr_imgTd = $(trList[i].childNodes[2]);//当前行的头像列的jQuery对象
                    var img = data[i].img;
                    if (img != null){
                        $curr_imgTd.children().html("<img src='data:image/png;base64,"+img+"' style='width: 33px;height: 33px;border: 1px solid #E6E6E6;border-radius: 100%'>");
                    }
                }
                if (len > 0){
                    $("#btn_deleteDept").addClass("layui-btn-disabled");
                    $("#btn_deleteDept").attr("disabled",true);
                }
            }
        });

        //监听行工具事件
        table.on('tool(filter_deptStaff)', function(obj){

            var data = obj.data;
            if(obj.event == 'edit'){
                //打开部员调度面板
                layer.open({
                    title:'部员调度',
                    type: 2,
                    content: '/jsp/userManage/deptStaffTransferPanel.jsp',
                    area: ['600px', '500px'],
                    btn: ['确定', '取消'],
                    yes:function (index, layero) {
                        //弹出层body的jQuery对象
                        var body = layer.getChildFrame("body",index);
                        //获取选中的部门id和职位id
                        var dept_id = body.find("#dept_id").val();
                        var position_id = body.find("#position_id").val();
                        if(dept_id != '' && position_id != ''){
                            //发送异步请求，更改员工的部门和职位
                            $.ajax({
                                url:'/deptManage/transferDeptStaff.do',
                                data:{
                                    cur_dept_id:$("#dept_id").val(),
                                    dept_id:dept_id,
                                    position_id:position_id,
                                    user_id:data.user_id
                                },
                                dataType:'json',
                                success:function (result) {
                                    layer.msg("更改成功！");
                                    //当前部门人数
                                    var currNum = table.cache["tb_deptStaff"].length - 1;
                                    //刷新表格数据
                                    queryDeptStaff();
                                    //如果部门没有员工了，将删除按钮使能
                                    if (currNum == 0){
                                        $("#btn_deleteDept").removeClass("layui-btn-disabled");
                                        $("#btn_deleteDept").attr("disabled",false);
                                    }
                                    //如果调度的员工为部门领导，将领导sqan设置为暂无
                                    if(result.code == 201){
                                        $("#manager_name").html("暂无");
                                    }
                                },
                                error:function () {
                                    layer.msg("更改失败！");
                                }
                            });
                        }else {
                            layer.msg("您没有对员工进行操作");
                        }
                        layer.close(index);
                    }
                });
            }
        });
    });

    /**
     * 条件查询部门员工信息，重载数据表格
     */
    function queryDeptStaff() {
        //重载表格
        layui.table.reload('tb_deptStaff', {
            url: '/deptManage/getDeptStaffList.do'
            ,where: {
                queryCondition:$("#queryCondition").val(),
                dept_id:$("#dept_id").val()
            }
        });
    }

    /**
     * 打开选择员工裂变弹出层
     */
    function openDeptStaffPanel() {
        layer.open({
            title:'部门经理变更',
            type: 2,//弹出一个iframe层
            content: '/jsp/userManage/deptStaffPanel.jsp?dept_id='+$("#dept_id").val()+'&dept_name='+$("#dept_name").text(),
            area: ['900px', '500px'],
            btn: ['确定', '取消'],
            yes:function (index, layero) {
                //弹出层body的jQuery对象
                var body = layer.getChildFrame("body",index);
                //选中的员工id、name
                var user_id = body.find("#selectedUserId").val();
                var real_name = body.find("#selectedUserName").val();

                if(user_id != '' && real_name != ''){
                    $("#manager_name").html(real_name);
                    //发送异步请求，更改部门经理
                    $.ajax({
                        url:'/deptManage/updateDeptManager.do',
                        data:{
                            user_id:user_id,
                            dept_id:$("#dept_id").val()
                        },
                        dataType:'json',
                        success:function () {
                            layer.msg("更改成功！");
                        },
                        error:function () {
                            layer.msg("更改失败！");
                        }
                    });
                }
                layer.close(index);
            }
        });
    }

    /**
     * 删除部门
     * @param dept_id
     */
    function deleteDept(dept_id) {

        location.href="/deptManage/deleteDept.do?dept_id="+dept_id;
    }
</script>
</html>
